<template>
    <view class="shop">
        <view class="video">
            <video :src="videoPrefixL + 5994" autoplay loop muted playsinline :controls="false"></video>
        </view>
        <swiper :current="currentIndex" @change="swiperChange" style="height: 472rpx;">
            <swiper-item v-for="(item, index) in items" :key="index">
                <view class="shopBlock">
                    <view class="item" v-for="(shops, index1) in item" :key="shops.productId"
                        :class="{ 'pressed': isPressed[index1] }" @click="shopsClick(shops.productId)"
                        @touchstart="handleTouchStart(index1)" @touchend="handleTouchEnd(index1)">
                        <view class="itemImage">
                            <image :src="imgPrefixL + `${shops.mainImgId}`" mode="aspectFill"></image>
                        </view>
                        <view class="itemTitle">
                            {{shops.productName}}
                        </view>
                    </view>
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
    import {
        listShopsByCategoryId
    } from '@/api/shops/index.js';
    export default {
        name: "shops",
        data() {
            return {
                items: [],
                currentIndex: 0,
                isPressed: [],
                imgPrefixL: process.env.VUE_APP_IMG_BASE_URL,
                videoPrefixL: process.env.VUE_APP_VIDEO_BASE_URL,
            };
        },
        methods: {
            getShopList() {
                listShopsByCategoryId({
                    sortId: this.categoryId
                }).then(res => {
                    for (var i = 0; i < res.data.length; i++) {
                        let data = res.data[i]
                        for (var j = 0; j < data.length; j++) {
                            data[j].mainImgId = (data[j].mainImgId).substring(0, 4)
                        }
                        this.items.push(data)
                    }
                })
            },
            swiperChange(e) {
                this.currentIndex = e.detail.current;
            },
            shopsClick(productId) {
                this.$store.commit('updateProductId', productId);
                this.$store.commit('updateMiddleOrShopDetailReveal', false);
            },
            handleTouchStart(index1) {
                this.$set(this.isPressed, index1, true);
            },
            handleTouchEnd(index1) {
                this.$set(this.isPressed, index1, false);
            },
        },
        computed: {
            categoryId() {
                return this.$store.state.categoryId;
            }
        },
        watch: {
            categoryId: {
                immediate: true,
                handler(newValue) {
                    this.getShopList();
                }
            }
        },
    }
</script>

<style lang="scss">
    @import "uview-ui/index.scss";

    .shop {
        flex: 1;
        width: 671rpx;
        height: 472rpx;

        .video {
            position: absolute;
            z-index: -1;
            width: 671rpx;
            overflow: hidden;
            height: 100%;
            top: 0;

            video {
                width: 758.79rpx;
                height: 100%;
                object-fit: cover;
            }
        }

        .shopBlock {
            margin: 48.995rpx auto;
            width: 628.141rpx;
            height: 396.985rpx;
            display: flex;
            flex-wrap: wrap;

            .item {
                width: 125.629rpx;
                height: 163.317rpx;
                margin-left: 15.704rpx;
                margin-right: 15.704rpx;
                margin-bottom: 35rpx;

                .itemImage {
                    width: 125.629rpx;
                    height: 125.629rpx;

                    image {
                        width: 125.629rpx;
                        height: 125.629rpx;
                        border-radius: 8rpx;
                        box-shadow: 0 0 3rpx 1rpx #999;
                    }
                }

                .itemTitle {
                    margin-top: 9.422rpx;
                    width: 100%;
                    height: 21.985rpx;
                    text-align: center;
                    font-family: AlimamaDaoLiTiTTF;
                    font-size: 8.794rpx;
                }
            }
        }
    }

    .pressed {
        transform: scale(0.9);
    }
</style>